<template>
  <div class="dashboard-editor-container">
    <!-- 顶部 Logo 和搜索框 -->
    <div class="header">
      <img src="@/assets/logo/logo.png" alt="慧医在线" class="logo" />
      <h1>慧医在线</h1>
      <el-input
        placeholder="搜索服务..."
        v-model="searchQuery"
        @keyup.enter="handleSearch"
        class="search-box"
        prefix-icon="el-icon-search"
      />
    </div>

    <!-- 主体布局 -->
    <div class="section-container">
      <el-row gutter="20">
        <el-col :span="12">
          <div class="section-card large" @click="navigateTo('AIHealthDiagnosis')">
            <i class="el-icon-medal-1 animated-icon"></i>
            <p>AI健康诊断</p>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="section-card" @click="navigateTo('DoctorAppointment')">
            <i class="el-icon-date animated-icon"></i>
            <p>预约医生</p>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="section-card large" @click="navigateTo('OnlineDiagnosis')">
            <i class="el-icon-medal-1 animated-icon"></i>
            <p>在线诊断</p>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="section-card large" @click="('AIHealthDiagnosis')">
            <i class="el-icon-medal-1 animated-icon"></i>
            <p>更多</p>
          </div>
        </el-col>

        <el-col :span="24">
          <div class="section-card">
            <div class="header-section">
              <i class="el-icon-document"></i>
              <p>健康科普</p>
            </div>
            <div class="health-tips">
              <h3>每日健康小贴士</h3>
              <p>{{ dailyTip }}</p>
              <el-button type="button" size="small" @click="refreshTip">刷新</el-button>
            </div>
            <div class="recommended-articles">
              <h3>推荐文章</h3>
              <ul>
                <li v-for="(article, index) in displayedArticles" :key="index" @click="openArticle(article.link)">
                  {{ article.title }}
                </li>
              </ul>
              <el-button v-if="!showAll" type="text" @click="showAll = true">显示更多</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background: linear-gradient(135deg, #e2eafc, #d1effe); // 渐变背景
  .header {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    .logo { width: 50px; margin-right: 16px; }
    h1 { font-size: 24px; margin-right: auto; }
    .search-box { width: 300px; border-radius: 20px; } // 圆角搜索框
  }
  .section-container {
    .section-card {
      background: #fff; padding: 20px; margin-bottom: 16px; cursor: pointer;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 10px;
      transition: all 0.3s;
      &:hover { transform: scale(1.05); }
      i { font-size: 40px; color: #409eff; }
      p { font-size: 16px; font-weight: bold; }
      .health-tips, .recommended-articles {
        background: #f9f9f9; border-radius: 8px; padding: 10px;
      }
    }
  }
}
</style>


<script>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';  // 引入 Vue Router 的 useRouter

export default {
  name: 'HomePage',
  setup() {
    const router = useRouter();  // 使用 useRouter 来获取路由实例
    const searchQuery = ref('');  // 搜索框绑定的值
    const dailyTip = ref("每天喝足够的水，保持身体水分平衡，有助于提高免疫力。");  // 每日小贴士的默认内容
    const articles = ref([
      { title: "如何保持良好的作息习惯", link: "https://www.baidu.com/link?url=dEchUr04kvMrVdWjESkUT83YW1FBmNNnYOC29XVdcYjUwUl3vqn8KduTYrO2vm-m&wd=&eqid=c7fd07c7012023d000000006673c57b9" },
      { title: "了解心脏健康的基础知识", link: "/article/heart-health" },
      { title: "日常饮食中的营养搭配建议", link: "/article/nutrition" },
      { title: "心理健康：处理压力的小技巧", link: "/article/stress-management" },
      { title: "适量运动的重要性", link: "/article/exercise" },
      { title: "如何建立良好的饮水习惯", link: "/article/hydration" },
      { title: "常见慢性病预防方法", link: "/article/chronic-diseases" },
    ]);  

    // 控制显示的文章数量
    const showAll = ref(false);  // 是否显示全部文章
    const displayedArticles = computed(() => {
      return showAll.value ? articles.value : articles.value.slice(0, 4);  // 根据 showAll 显示部分或全部文章
    });

    // 搜索框的搜索功能
    const handleSearch = () => {
      console.log('搜索关键词:', searchQuery.value);  // 这里可以实现搜索功能
    };

    // 页面跳转功能
    const navigateTo = (page) => {
   const routes = {
     'AIHealthDiagnosis': 'healthWay/mental',
     'DoctorAppointment': '/remote/remote',
      'OnlineDiagnosis' : '/remote/im'
   };
   if (routes[page]) {
     router.push(routes[page]);
   }
 };


    // 打开文章链接
    const openArticle = (link) => {
      window.location.href = link;
    };

    // 刷新每日小贴士内容
    const refreshTip = (event) => {
      event.preventDefault();
      dailyTip.value = "适量运动有助于保持心脏健康，每天走5000步是一个不错的选择！";
    };

    return {
      searchQuery,
      handleSearch,
      navigateTo,
      dailyTip,
      articles,
      displayedArticles,
      showAll,
      openArticle,
      refreshTip
    };
  }
};
</script>


<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background: linear-gradient(135deg, #f0f8ff, #e6f7ff);  // 更柔和的渐变背景

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    border-bottom: #e8d5d5 3px solid;
    .logo {
      width: 50px;
      margin-right: 16px;
    }

    h1 {
      font-size: 28px;  // 增大标题字体
      margin-right: auto;
      color: #333;  // 深色标题
    }

    .search-box {
      width: 300px;
      border-radius: 20px;
      background: #fff;  // 搜索框背景色
      border: 1px solid #ddd;  // 搜索框边框
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  // 搜索框阴影
    }
  }

  .section-container {
    .section-card {
      background: #fff;
      padding: 24px;  // 增加内边距
      margin-bottom: 20px;  // 增加外边距
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);  // 增加阴影深度
      border-radius: 12px;  // 增加圆角半径
      transition: all 0.3s;

      &:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);  // 增加悬停阴影深度
      }

      i {
        font-size: 48px;  // 增大图标尺寸
        color: #409eff;
      }

      p {
        margin-top: 12px;
        font-size: 18px;
        font-weight: bold;
        color: #333;  // 深色文字
      }

      .header-section {
        text-align: center;
        margin-bottom: 16px;  // 增加间距
      }

      .health-tips {
        margin-top: 15px;
        padding: 16px;
        background-color: #f9f9f9;
        border-radius: 12px;

        h3 {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 12px;
          color: #333;  // 深色标题
        }

        p {
          font-size: 16px;
          color: #666;
          line-height: 1.5;  // 增加行高
        }
      }

      .recommended-articles {
        margin-top: 20px;
        padding: 16px;
        background-color: #f9f9f9;
        border-radius: 12px;

        h3 {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 12px;
          color: #333;  // 深色标题
        }

        ul {
          list-style: none;
          padding: 0;

          li {
            font-size: 16px;
            color: #409eff;
            cursor: pointer;
            margin-bottom: 8px;

            &:hover {
              text-decoration: underline;
            }
          }
        }

        .el-button--text {
          font-size: 16px;
          color: #409eff;
        }
      }
    }
  }
}
</style>